<template>
  <div class="app-container">
    <div class="view-style">
      <el-form ref="formData" :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label prop="taskModelName">
          <el-input v-model="formData.taskModelName" placeholder="模版名称" />
        </el-form-item>
        <el-form-item label prop="taskModelLabel">
          <el-select v-model="formData.taskModelLabel" placeholder="任务类型">
            <el-option label="1" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label prop="isValid">
          <el-select v-model="formData.isValid" placeholder="状态">
            <el-option label="1" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label prop="sendUserName">
          <el-input v-model="formData.sendUserName" placeholder="创建人" />
        </el-form-item>
        <el-form-item label prop="time">
          <el-date-picker
            v-model="formData.time"
            type="daterange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-button type plain @click="searchClick">搜索</el-button>
        <el-button type plain @click="resetSearch">重置</el-button>
        <div class="btns">
          <el-button type="primary" @click="handelAddClick">新增</el-button>
          <el-button type="primary" @click="batchDelete('all')">批量删除</el-button>
        </div>
      </el-form>
    </div>

    <div class="view-style">
      <el-table
        :data="tableData"
        stripe
        :default-sort="{prop: 'sortable'}"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="taskModelName" label="模版名称" width="180" />
        <el-table-column prop="taskTypeName" label="任务类型" sortable width="180" />
        <el-table-column prop="craftNum" label="工种数" />
        <el-table-column prop="sort" label="排序" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.status?'启用':'停用'" placement="top">
              <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="createUserName" label="创建人" />
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <div>
              {{ scope.row.createTime | formatTime('{y}-{m}-{d} {h}-{i}') }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <div>
              <el-button type="text">内容维护</el-button>
              <el-button type="text" size="small" @click="handleClick(scope.row)">
                <img src="../../../assets/overview/bj.png" alt="">
              </el-button>
              <el-button type="text" size="small" @click="batchDelete(1,scope.row)">
                <img src="../../../assets/overview/sc.png" alt="">
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination ref="pagination" />
  </div>
</template>
<script>
const formData = {
  appCode: 'TY',
  taskModelName: '',
  beginDate: '',
  endDate: '',
  isValid: ''

}
import pagination from '@/components/pagination'
import { pickerOptions } from '@/utils'
import { getTaskModelList, deleteTaskModelById } from '@/api/task/taskModel'
export default {
  components: { pagination },
  data() {
    return {
      pickerOptions: pickerOptions,
      formData: Object.assign({}, formData),
      multipleSelection: [],
      tableData: [],
      searchData: {}
    }
  },
  methods: {
    handleClick(row) {
      this.$router.push({ path: '/template/list/msg', query: { id: row.taskModelId }})
    },
    // 重置搜索
    resetSearch() {
      this.$refs['formData'].resetFields()
      this.formData = Object.assign({}, formData)
      this.$refs.pagination.getData()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handelAddClick() {
      this.$router.push({ path: '/template/new' })
    },
    batchDelete(type, row) {
      if (type === 'all' && this.multipleSelection.length === 0) {
        this.$message.warning('请选择删除项')
        return
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const taskModelId = type === 'all' ? this.multipleSelection.join() : row.taskModelId
          deleteTaskModelById({ taskModelId }).then(res => {
            this.$message.success(res.msg)
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    searchClick() {
      this.searchData = Object.assign({}, this.formData)
      this.$refs.pagination.getData()
    },
    search() {
      const params = {
        ...this.$refs.pagination.pageData,
        ...this.searchData,
        appCode: 'TY'
      }
      return new Promise(resolve => {
        getTaskModelList(params).then(res => {
          this.listLoading = false
          this.tableData = res.data.list
          this.dictMap = res.dictMap || {}
          resolve(res.data)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.btns {
  float: right;
}
.view-style {
  width: 100%;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}
</style>

